<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <el-button @click="Cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <div class="card_box">
      <el-card class="box-card" shadow="never" v-for="(item, index) in datas.personalPaperAnswerTopicVOList" :key="index">
        <template #header>
          <div class="card-header">
            <span>{{ index+1 + '、' }}{{ item.topic }} </span><span v-show="istrueFun(item.answerType, item.correct)" style="color: red;"> (正确答案是：{{ item.correct }})</span>
          </div>
        </template>
        <div v-for="(items) in item.topicAnswerList" :key="items.id" style="pointer-events: none;">
          <el-checkbox v-model="items.cheakTrue" :label="items.type+items.topic" size="large" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { useRoute } from "vue-router";
import { ref, getCurrentInstance } from "vue";
import { personalPaperId  } from "@/api/personalTestPaper";
import data from "./data";
const route: any = useRoute();
const { bill, datas } = data;
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const keyTimemin = ref(null);
let tableLoading = ref(false);
let outList = ref([]);
const paginationParams = ref({
  total: 12,
  pageNum: 1,
  pageSize: 10,
});

const handleQuery = function (): void {};
const changeFun = function (e: any): void {
  console.log(e);
};
route.query.id &&
  personalPaperId(route.query.id).then((res) => {
    res.data.personalPaperAnswerTopicVOList.forEach((val) => {
      let correct = ''
      val.topicAnswerList.forEach((item, index) => {
        if (val.answerType.includes(item.type)) {
          item.cheakTrue = true
        } else {
          item.cheakTrue = false
        }
        if (item.isRight) {
          correct+=item.type
        }
        val.correct = correct
      })
    })
    datas.value = res.data;
  });
const Cancel = () => {
  datas.value = {};
  const obj = { path: "/testPaper/personalTestPaperList" };
  proxys.$tab.closeOpenPage(obj);
};
const istrueFun = (type, datas) => { 
  return (type.replace(/,/g, "") == datas)? false : true
}
</script>
<style scoped>
.pad_10 {
  padding: 10px;
  display: flex;
  height: calc(100vh - 100px);
  flex-direction: column;
  overflow: hidden;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.box-card{
  margin-bottom: 20px;
}
.card_box {
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
  padding: 10px;
  box-sizing: border-box;
}
</style>